define(function (require, exports, module) {
    require('./css/style.css')

    function onload(api) {
        return {
            template: require('./Widget.html'),
            props: {
                value: [String, Object, Array],
                // 图片数量限制
                limit: {
                    type: Number,
                    default: 5,
                },
                // 大小限制(MB)
                fileSize: {
                    type: Number,
                    default: 5,
                },
                // 文件类型, 例如['png', 'jpg', 'jpeg']
                fileType: {
                    type: Array,
                    default: () => ["png", "jpg", "jpeg"],
                },
                // 是否显示提示
                isShowTip: {
                    type: Boolean,
                    default: true
                },
                // 图片路径
                path: {
                    type: String,
                    default: 'common'
                }
            },
            data() {
                return {
                    number: 0,
                    uploadList: [],
                    dialogImageUrl: "",
                    dialogVisible: false,
                    hideUpload: false,
                    baseUrl: alluse.bigcenter,
                    uploadImgUrl: alluse.bigcenter + "/common/upload/" + this.path, // 上传的图片服务器地址
                    headers: {
                        Authorization: 'Bearer ' + $.cookie(common.getTokenKey())
                    },
                    fileList: []
                };
            },
            watch: {
                value: {
                    handler(val) {
                        if (val) {
                            // 首先将值转为数组
                            const list = Array.isArray(val) ? val : this.value.split(',');
                            // 然后将数组转为对象数组
                            this.fileList = list.map(item => {
                                return {name: item, url: item};
                            });
                        } else {
                            this.fileList = [];
                            return [];
                        }
                    },
                    deep: true,
                    immediate: true
                }
            },
            computed: {
                // 是否显示提示
                showTip() {
                    return this.isShowTip && (this.fileType || this.fileSize);
                },
            },
            methods: {
                // 删除图片
                handleRemove(file, fileList) {
                    const findIndex = this.fileList.map(f => f.name).indexOf(file.name);

                    this.fileList.splice(findIndex, 1);
                    this.$emit("input", this.listToString(this.fileList));
                },
                // 上传成功回调
                handleUploadSuccess(res) {
                    if (res.code === 200) {
                        this.uploadList.push({
                            name: res.fileName,
                            url: alluse.oss + "/" + this.path + res.url,
                            subUrl: "/" + this.path + res.url,
                            ossId: res.ossId
                        });
                        if (this.uploadList.length === this.number) {
                            this.fileList = [];
                            this.uploadList = [];
                            this.number = 0;
                            console.log(this.uploadList.length)
                            if (this.uploadList.length===1){
                                this.$emit("input", this.uploadList[0].url);
                            }else {
                                // 原来的
                                this.$emit("input", this.listToString(this.fileList));
                            }
                            this.loading.close();
                            this.$emit("uploaded");
                        }
                    } else {
                        this.msgError(res.msg);
                        this.loading.close();
                    }
                },
                // 上传前loading加载
                handleBeforeUpload(file) {
                    let isImg = false;
                    if (this.fileType.length) {
                        let fileExtension = "";
                        if (file.name.lastIndexOf(".") > -1) {
                            fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
                        }
                        isImg = this.fileType.some((type) => {
                            if (file.type.indexOf(type) > -1) return true;
                            if (fileExtension && fileExtension.indexOf(type) > -1) return true;
                            return false;
                        });
                    } else {
                        isImg = file.type.indexOf("image") > -1;
                    }

                    if (!isImg) {
                        this.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
                        return false;
                    }
                    if (this.fileSize) {
                        const isLt = file.size / 1024 / 1024 < this.fileSize;
                        if (!isLt) {
                            this.msgError("上传图片大小不能超过"+ (this.fileSize < 1 ? this.fileSize * 1000+"KB!" : this.fileSize + "MB!"));
                            return false;
                        }
                    }
                    this.loading = this.$loading({
                        lock: true,
                        text: "正在上传图片，请稍候...",
                        background: "rgba(0, 0, 0, 0.7)",
                    });
                    this.number++;
                },
                // 文件个数超出
                handleExceed() {
                    this.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
                },
                // 上传失败
                handleUploadError(res) {
                    this.msgError("上传图片失败，请重试");
                    this.loading.close();
                },
                // 预览
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                // 对象转成指定字符串分隔
                listToString(list, separator) {
                    let strs = "";
                    separator = separator || ",";
                    for (let i = 0; i < list.length; i++) {
                        strs += list[i].subUrl

                        if (i !== list.length - 1) {
                            strs += separator;
                        }
                    }
                    return strs !== "" ? strs : "";
                },
            }
        }
    }

    module.exports = {
        onload
    };
});
